<template>
  <el-dialog
    v-model="isShow"
    :title="dialogInfo.dialogTitle"
    width="500"
    :before-close="handleClose"
  >
    <template v-if="dialogInfo.dialogTitle !== '密码'">
      <el-input v-model="input" placeholder="Please input" clearable />
    </template>
    <template v-else>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="changeTab">
        <el-tab-pane
          v-for="item in updatePasswordTypeList"
          :key="item"
          :label="item.key"
          :name="item.key"
        >
          <div v-if="item.key !== '密码验证'">
            <div class="box">
              <div class="box-text">{{ item.key.slice(0, 2) }}</div>
              <el-input v-model="item.value" disabled clearable />
            </div>
            <div class="box">
              <div class="box-text">验证码</div>
              <div class="box-input">
                <el-input v-model="keyValue" placeholder="Please input" clearable />
                <el-button @click="getCode">{{
                  totalSeconds === seconds ? '获取验证码' : `${seconds}秒后重试`
                }}</el-button>
              </div>
            </div>
          </div>
          <div class="box" v-else>
            <div class="box-text">当前密码</div>
            <div class="box-input">
              <el-input
                v-model="passwordValue"
                placeholder="请输入当前的密码"
                type="password"
                show-password
              />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose"> 取消 </el-button>
        <el-button v-if="dialogInfo.dialogTitle !== '密码'" type="primary" @click="handleSubmit">
          确定
        </el-button>
        <el-button v-else type="primary" @click="handleSubmit"> 下一步 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const isShow = ref(false)
const input = ref('')
const activeName = ref('手机验证')
const keyValue = ref('')
const passwordValue = ref('')

const totalSeconds = ref(60)
const seconds = ref(totalSeconds.value)
const timerId = ref(null)
const result = ref('')

const props = defineProps({
  dialogInfo: {
    type: Object
  },
  updatePasswordTypeList: {
    type: Array
  }
})

const emits = defineEmits(['closeDialog', 'submitData'])

watch(
  () => props.dialogInfo,
  () => {
    isShow.value = props.dialogInfo.dialogVisible
    input.value = props.dialogInfo.dialogValue
  },
  { deep: true }
)

const changeTab = () => {
  clearInterval(timerId.value)
  seconds.value = totalSeconds.value
  timerId.value = null
}

// 获取验证码
const getCode = () => {
  if (!timerId.value && totalSeconds.value === seconds.value) {
    timerId.value = setInterval(() => {
      seconds.value--
      if (seconds.value === 0) {
        clearInterval(timerId.value)
        seconds.value = totalSeconds.value
        timerId.value = null
      }
    }, 1000)
  }

  // 发送网络请求

  result.value = '1234'
}

const handleSubmit = () => {
  emits('submitData', { key: props.dialogInfo.dialogTitle, value: input.value.trim() })
  input.value = input.value.trim()
  // emits('closeDialog')
}

const handleClose = () => {
  emits('closeDialog')
}
</script>

<style lang="scss" scoped>
::v-deep(.el-dialog) {
  border-radius: 25px;
}
</style>
<style lang="scss">
:root {
  --el-border-radius-small: 17px;
}
.el-input {
  width: 100%;
  height: 44px;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 1px;
  color: #2f2e3f;
}
.el-tabs__item {
  font-size: 16px;
  font-weight: 550;
  letter-spacing: 2px;
  color: #1f2126;
}
// ::v-deep(.el-dialog) {
//   border-radius: 25px;
// }

.box {
  .box-text {
    height: 22px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #1f2126;
    margin: 8px 0;
  }
  .box-input {
    display: flex;
    align-items: center;
    .el-button {
      margin-left: 16px;
      height: 44px;
      font-size: 16px;
      font-weight: 550;
      letter-spacing: 2px;
      color: #1f2126;
    }
  }
}
</style>
